<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Sliding Sign In Sign Up Page</title>

    <link rel="stylesheet" href="/stylesheets/logreg.css">

    <script src="/javascripts/jquery.js"></script>


</head>

<body>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"
        crossorigin="anonymous">

    <div class="container" id="container">
        <div class="form-container sign-up-container">
            <form >
                <h1>Create Account</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your info for registration</span>
                <input type="text" id="name" placeholder="Name" />
                <input type="password" id="password" placeholder="Password" />
                <input type="text" id="department" placeholder="Department" />

                <!-- <input type="text" id="name" >
                <input type="text" id="password">
                <input type="text" id="department"> -->
                <button id="save">Sign Up</button>
                <!-- <input type="button" value="保存" id="save"> -->
            </form>
        </div>
        <div class="form-container sign-in-container">
            <form action="/logreg/login" method="post">
                <h1>Sign in</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <span>or use your account</span>
                <input type="text" id="username" name="username" placeholder="Name" />
                <!-- <input type="text" id="username" name="username" placeholder="请输入用户名" required> -->
                <input type="password" id="password" name="password" placeholder="Password" />
                <!-- <input type="text"  id="password" name="password" placeholder="请输入密码" required> -->
                <a href="#">Forgot your password?</a>
                <button id="login">Sign In</button>
                <!-- <input type="submit" value="登陆" id="login" > -->
            </form>
        </div>
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Welcome Back!</h1>
                    <p>To keep connected with us please login with your personal info</p>
                    <button class="ghost" id="signIn">Sign In</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Hello, Friend!</h1>
                    <p>Enter your personal details and start journey with us</p>
                    <button class="ghost" id="signUp">Sign Up</button>
                </div>
            </div>
        </div>
    </div>




    <script src="/javascripts/logreg.js"></script>




</body>
<script src="/javascripts/index.js"></script>

</html>